<template>
  <a-card :loading="loading" :bordered="false" style="margin-top: 12px">
    <v-charts :options="options"  style="width:100%;height:400px" autoresize />
  </a-card>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/title.js'
import 'echarts/lib/component/markLine'
import { getAction } from '@api/manage'

export default {
  name: "DepartmentClasstimeRank",
  components:{
    'v-charts': ECharts
  },
  props: {
    date: {
      type: String,
      default: ''
    },
    orgCode: {
      type: String,
      default: ''
    },
  },
  watch:{
    date: function(){
      this.loadData();
    },
    orgCode: function(){
      this.loadData();
    },
  },

  data(){
    return {
      loading: true,
      options: {
        color: '#1890FF',
        title: {
          textAlign: 'center',
          x:'center',
          y:'top',
          text: '课时量排名'
        },
        tooltip:{},
        grid:{
          show: true,
          bottom:'25%'
        },
        xAxis:{
          axisLabel:{
            interval: 0,
            rotate: 90
          },
          type: 'category',
          data:[]
        },
        yAxis:[
          {
            name:'课时量',
            type:'value',
            min:0
          }
        ],
        series:[{
          name: '总课时',
          type: 'bar',
          data:[],
          markLine:{ // 设置平均线
            symbol: 'none',
            itemStyle : {
              normal : {
                color:'#dc3545',
                label : {
                  show:true
                }
              }
            },

            data:[
              {
                type:"average",
                name:"平均值"
              }
            ]
          },
        }]
      },
      url: {
        getDataUrl:'index/departmentIndex/teacherClassTimeByYearAndOrgCode'
      }
    }
  },
  methods: {
    loadData(){
      getAction(this.url.getDataUrl, { date: this.date, orgCode: this.orgCode}).then((res) => {
        if (res.success) {
          console.log(res.result);

          this.options.xAxis.data = res.result.names
          this.options.series[0].data = res.result.classtimes
          console.log(this.options)

        }
        // console.log(this.options)
        if(res.code===510){
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    }
  },
  mounted() {
    this.loadData();
  }
}
</script>

<style scoped>

</style>